<template>
  <div class="about-container">
    <el-card class="about-card">
      <!-- 品牌简介 -->
      <section class="section brand-intro">
        <h2 class="section-title">映像婚纱约拍</h2>
        <div class="content">
          <p>
            「映像婚纱约拍」创立于2018年，是一家致力于高端定制婚纱摄影服务的精品摄影机构。秉承"光影艺术，映照人生"的品牌理念，我们用专业的技术与艺术的视角，为每位客户定制独一无二的影像作品。
          </p>
        </div>
      </section>

      <!-- 核心优势 -->
      <section class="section advantages">
        <h2 class="section-title">核心优势</h2>
        <el-row :gutter="40">
          <el-col :span="8" v-for="item in advantages" :key="item.title">
            <div class="advantage-item">
              <el-icon class="icon" :size="50">
                <component :is="item.icon" />
              </el-icon>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </el-col>
        </el-row>
      </section>

      <!-- 艺术团队 -->
      <section class="section team">
        <h2 class="section-title">艺术团队</h2>
        <div class="content">
          <p>
            我们的团队由国内外知名艺术院校毕业的精英摄影师组成，他们均有着丰富的时尚摄影和商业摄影经验。每位摄影师都是自己领域的专家，擅长不同风格的创作，能够准确捕捉每个精彩瞬间。
          </p>
          <p>
            配备专业的造型团队、灯光师和后期制作团队，从前期拍摄到后期精修，每个环节都严格把控，只为呈现最完美的作品。
          </p>
        </div>
      </section>

      <!-- 品质承诺 -->
      <section class="section promise">
        <h2 class="section-title">品质承诺</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in promises" :key="item.title">
            <el-card class="promise-card" shadow="hover">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <!-- 联系方式 -->
      <section class="section contact">
        <h2 class="section-title">联系方式</h2>
        <div class="contact-info">
          <p>
            <el-icon><Location /></el-icon> 地址：北京市朝阳区建国路88号映像大厦
          </p>
          <p>
            <el-icon><Phone /></el-icon> 预约热线：400-888-8888
          </p>
          <p>
            <el-icon><Message /></el-icon> 商务合作：business@yingxiang.com
          </p>
          <p>
            <el-icon><Clock /></el-icon> 营业时间：周一至周日 10:00-22:00
          </p>
        </div>
      </section>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Camera, Star, Medal, Location, Phone, Message, Clock } from '@element-plus/icons-vue'

const advantages = [
  {
    icon: 'Camera',
    title: '顶级器材',
    description: '配备哈苏、徕卡等世界顶级摄影器材，为每个画面提供极致画质',
  },
  {
    icon: 'Star',
    title: '定制服务',
    description: '专属摄影师一对一服务，根据个人需求量身定制拍摄方案',
  },
  {
    icon: 'Medal',
    title: '品质保证',
    description: '严苛的品控标准，确保每张照片都是艺术级的呈现',
  },
]

const promises = [
  {
    title: '原片终身保存',
    description: '专业级存储系统，确保原片永久安全',
  },
  {
    title: '隐私严格保护',
    description: '签订保密协议，保护客户隐私',
  },
  {
    title: '透明定价',
    description: '明码标价，拒绝任何隐形消费',
  },
  {
    title: '终身售后',
    description: '提供终身的售后服务支持',
  },
]
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
  box-sizing: border-box;
}

.about-card {
  margin-top: 0;
  flex: 1;
}

.section {
  margin-bottom: 80px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 50px;
  font-weight: 300;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, #409eff, #36d1dc);
}

.content {
  color: #5a6a7f;
  line-height: 2;
  text-align: justify;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.advantage-item {
  text-align: center;
  padding: 30px;
  transition: transform 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-5px);
}

.advantage-item .icon {
  color: #409eff;
  margin-bottom: 20px;
}

.advantage-item h3 {
  font-size: 22px;
  color: #2c3e50;
  margin: 15px 0;
  font-weight: 500;
}

.advantage-item p {
  color: #5a6a7f;
  line-height: 1.8;
}

.promise-card {
  text-align: center;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

.promise-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.promise-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
}

.promise-card p {
  color: #5a6a7f;
  font-size: 14px;
  line-height: 1.8;
  padding: 0 15px;
}

.contact-info {
  max-width: 600px;
  margin: 0 auto;
}

.contact-info p {
  margin: 20px 0;
  color: #5a6a7f;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.8;
}

.contact-info .el-icon {
  margin-right: 15px;
  color: #409eff;
  font-size: 20px;
}
</style>
